<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.cdvtc.flower.model.Products" %>
<%@ page import="com.cdvtc.flower.dao.ProductsDao" %>
<%@ page import="com.cdvtc.flower.dao.impl.ProductsDaoImpl" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2024/5/23
  Time: 11:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="html/assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->

    <link rel="stylesheet" href="html/assets/css/vendor/ionicons.min.css">

    <!-- Plugins CSS -->
    <link rel="stylesheet" href="html/assets/css/plugins/slick.css">
    <link rel="stylesheet" href="html/assets/css/plugins/animation.css">
    <link rel="stylesheet" href="html/assets/css/plugins/jqueryui.min.css">

    <!-- Vendor & Plugins CSS (Please remove the comment from below vendor.min.css & plugins.min.css for better website load performance and remove css files from avobe) -->
    <!--
    <script src="html/assets/js/vendor/vendor.min.js"></script>
    <script src="html/assets/js/plugins/plugins.min.js"></script>
    -->

    <!-- Main Style CSS (Please use minify version for better website load performance) -->
    <link rel="stylesheet" href="html/assets/css/style.css">
    <!--<link rel="stylesheet" href="html/assets/css/style.min.css">-->

</head>

<body>

<div class="main-wrapper">

    <header class="fl-header">

        <!-- Header Top Start -->
        <div class="header-top-area d-none d-lg-block">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="header-top-inner">
                            <div class="row">
                                <div class="col-lg-4 col-md-3">
                                    <div class="social-top">
                                        <ul>
                                            <li><a href="#"><i class="ion-social-facebook"></i></a></li>
                                            <li><a href="#"><i class="ion-social-twitter"></i></a></li>
                                            <li><a href="#"><i class="ion-social-tumblr"></i></a></li>
                                            <li><a href="#"><i class="ion-social-googleplus"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-md-9">
                                    <div class="top-info-wrap text-right">
                                        <ul class="top-info">
                                            <li>周一 - 周五 : 9am to 5pm</li>
                                            <li><a href="#">+19108069904</a></li>
                                            <li><a href="#">花卉电商@gmail.com</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- haeader bottom Start -->
        <div class="haeader-bottom-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-2 col-md-4 col-5">
                        <div class="logo-area">
                            <a href="index.html"><img src="html/assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-lg-8 d-none d-lg-block">
                        <div class="main-menu-area text-center">
                            <!--  Start Mainmenu Nav-->
                            <nav class="main-navigation">
                                <ul>
                                    <li><a href="index.jsp"> 首页 </a></li>
                                    <li><a href="shop.jsp"> 商品列表 </a>
                                    <li><a href="product-details.jsp"> 商品详细 </a></li>
                                </ul>
                            </nav>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- haeader bottom End -->

        <!-- main-search start -->
        <div class="main-search-active">
            <div class="sidebar-search-icon">
                <button class="search-close"><span class="ion-android-close"></span></button>
            </div>
            <div class="sidebar-search-input">
                <form>
                    <div class="form-search">
                        <input id="search" class="input-text" value="" placeholder="Search entire store here ..."
                               type="search">
                        <button class="search-btn" type="button">
                            <i class="ion-ios-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- main-search start -->


        <!-- off-canvas menu start -->
        <aside class="off-canvas-wrapper">
            <div class="off-canvas-overlay"></div>
            <div class="off-canvas-inner-content">
                <div class="btn-close-off-canvas">
                    <i class="ion-android-close"></i>
                </div>

                <div class="off-canvas-inner">

                    <!-- offcanvas widget area start -->
                    <div class="offcanvas-widget-area">
                        <div class="off-canvas-contact-widget">
                            <ul>
                                <li>
                                    Mon - Fri : 9am to 5pm
                                </li>
                                <li>
                                    <a href="#">0123456789</a>
                                </li>
                                <li>
                                    <a href="#">info@yourdomain.com</a>
                                </li>
                            </ul>
                        </div>
                        <div class="off-canvas-social-widget">
                            <a href="#"><i class="ion-social-facebook"></i></a>
                            <a href="#"><i class="ion-social-twitter"></i></a>
                            <a href="#"><i class="ion-social-tumblr"></i></a>
                            <a href="#"><i class="ion-social-googleplus"></i></a>
                        </div>

                    </div>
                    <!-- offcanvas widget area end -->
                </div>
            </div>
        </aside>
        <!-- off-canvas menu end -->


    </header>


    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area section-ptb">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2 class="breadcrumb-title">商品详细</h2>
                    <!-- breadcrumb-list start -->
                    <ul class="breadcrumb-list">
                        <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                        <li class="breadcrumb-item active">商品详细</li>
                    </ul>
                    <!-- breadcrumb-list end -->
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb-area end -->


    <!-- main-content-wrap start -->
    <div class="main-content-wrap section-ptb product-details-page">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-7 col-md-6">
                    <div class="product-details-images">
                        <div class="product_details_container">
                            <!-- product_big_images start -->
                            <div class="product_big_images-right">
                                <%
                                    String id = request.getParameter("id");
                                    System.out.println(id);

                                    ProductsDao productsDao = new ProductsDaoImpl();
                                    List<Products> products;
                                    Products products1;
                                    products1 = productsDao.getProductById(Integer.parseInt(id));
                                    pageContext.setAttribute("product_1",products1);
                                    products = productsDao.getAllProducts();
                                    pageContext.setAttribute("product", products);
                                %>
                                <div class="portfolio-full-image tab-content">
                                    <div role="tabpanel" class="tab-pane active product-image-position" id="img-tab-1">
                                        <a href="tool/assets/images/product/${product_1.image}" class="img-poppu">
                                            <img src="tool/assets/images/product/${product_1.image}" alt="#">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- product_big_images end -->

                            <!-- Start Small images -->
                            <ul class="product_small_images-left vartical-product-active nav" role="tablist">

                                <c:forEach var="product" items="${product}">
                                    <li role="presentation" class="pot-small-img">
                                        <a href="javascript:void(0);" onclick="goToProductDetails(${product.product_id})" role="tab" data-toggle="tab">
                                            <img src="tool/assets/images/product/${product.image}" alt="#">
                                        </a>
                                    </li>
                                </c:forEach>
                            </ul>
                            <!-- End Small images -->
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-5 col-md-6">

                    <!-- product_details_info start -->

                    <div class="product_details_info">
                        <h2>${product_1.product_name}</h2>
                        <!-- pro_rating end -->
                        <!-- pro_details start -->
                        <div class="pro_details">
                            <p>${product_1.description}</p>
                        </div>
                        <!-- pro_details end -->
                        <!-- pro_dtl_prize start -->
                        <ul class="pro_dtl_prize">
                            <li class="old_prize">${product_1.original_price}</li>
                            <li> ${product_1.sale_price}</li>
                        </ul>
                        <!-- pro_dtl_prize end -->
                        <!-- pro_dtl_color start-->
                        <div class="pro_dtl_color">
                            <h2 class="title_2">选择颜色</h2>
                            <ul class="pro_choose_color">
                                <li class="红"><a href="#"><i class="ion-record"></i></a></li>
                                <li class="蓝"><a href="#"><i class="ion-record"></i></a></li>
                                <li class="紫"><a href="#"><i class="ion-record"></i></a></li>
                                <li class="黄"><a href="#"><i class="ion-record"></i></a></li>
                            </ul>
                        </div>
                        <!-- pro_dtl_color end-->
                        <!-- product-quantity-action start -->
                        <div class="product-quantity-action">
                            <div class="product-state"><span>数量 :</span></div>
                            <div class="product-quantity">
                                <form id="quantityForm"> <!-- 移除 action 属性，因为我们不直接提交这个表单 -->
                                    <div class="product-quantity">
                                        <div class="cart-plus-minus">
                                            <input id="quantityInput" name="quantity" value="1" type="number">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- product-quantity-action end -->

                        <!-- pro_dtl_btn start -->
                        <ul class="pro_dtl_btn">
                            <li>
                                <a id="buyNowBtn" href="order-now?product_id=${product_1.product_id}&quantity=1" class="buy_now_btn">购买</a> <!-- 初始数量设置为1 -->
                            </li>
                            <li><a href="#"><i class="ion-heart"></i></a></li>
                        </ul>
                        <!-- pro_dtl_btn end -->

                        <!-- 以下是使用 JavaScript 更新购买按钮 href 的示例 -->
                        <script>
                            document.getElementById('quantityInput').addEventListener('input', function() {
                                var quantity = this.value; // 获取用户输入的数量
                                var buyNowBtn = document.getElementById('buyNowBtn'); // 获取购买按钮

                                // 更新购买按钮的 href，包含产品ID和数量
                                buyNowBtn.href = 'order-now?product_id=' + encodeURIComponent('${product_1.product_id}') + '&quantity=' + quantity;
                            });
                        </script>
                    </div>
                    <!-- product_details_info end -->
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="product-details-tab mt-60">
                        <ul role="tablist" class="mb-50 nav">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" role="tab" href="#description" class="active">Description</a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" role="tab" href="#sheet">Data sheet</a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" role="tab" href="#reviews">Reviews</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-12">
                    <div class="product_details_tab_content tab-content">
                        <!-- Start Single Content -->
                        <div class="product_tab_content tab-pane active" id="description" role="tabpanel">
                            <div class="product_description_wrap">
                                <div class="product_desc mb--30">
                                    <h2 class="title_3">Details</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        noexercit ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                                        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                                        qui officia deserunt mollit anim id.</p>
                                </div>
                                <div class="pro_feature">
                                    <h2 class="title_3">Features</h2>
                                    <ul class="feature_list">
                                        <li><a href="#"><i class="ion-ios-play-outline"></i>Duis aute irure dolor in
                                            reprehenderit in voluptate velit esse</a></li>
                                        <li><a href="#"><i class="ion-ios-play-outline"></i>Irure dolor in reprehenderit
                                            in voluptate velit esse</a></li>
                                        <li><a href="#"><i class="ion-ios-play-outline"></i>Sed do eiusmod tempor
                                            incididunt ut labore et </a></li>
                                        <li><a href="#"><i class="ion-ios-play-outline"></i>Nisi ut aliquip ex ea
                                            commodo consequat.</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Content -->
                        <!-- Start Single Content -->
                        <div class="product_tab_content tab-pane" id="sheet" role="tabpanel">
                            <div class="pro_feature">
                                <h2 class="title_3">Data sheet</h2>
                                <ul class="feature_list">
                                    <li><a href="#"><i class="ion-ios-play-outline"></i>Duis aute irure dolor in
                                        reprehenderit in voluptate velit esse</a></li>
                                    <li><a href="#"><i class="ion-ios-play-outline"></i>Irure dolor in reprehenderit in
                                        voluptate velit esse</a></li>
                                    <li><a href="#"><i class="ion-ios-play-outline"></i>Irure dolor in reprehenderit in
                                        voluptate velit esse</a></li>
                                    <li><a href="#"><i class="ion-ios-play-outline"></i>Sed do eiusmod tempor incididunt
                                        ut labore et </a></li>
                                    <li><a href="#"><i class="ion-ios-play-outline"></i>Sed do eiusmod tempor incididunt
                                        ut labore et </a></li>
                                    <li><a href="#"><i class="ion-ios-play-outline"></i>Nisi ut aliquip ex ea commodo
                                        consequat.</a></li>
                                    <li><a href="#"><i class="ion-ios-play-outline"></i>Nisi ut aliquip ex ea commodo
                                        consequat.</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- End Single Content -->
                        <!-- Start Single Content -->
                        <div class="product_tab_content tab-pane" id="reviews" role="tabpanel">
                            <div class="row">
                                <div class="col-lg-7">

                                    <!-- blog-details-wrapper -->
                                    <div class="col-lg-12 review_address_inner">
                                        <h5>Comments</h5>
                                        <!-- Single Review -->
                                        <div class="pro_review">
                                            <div class="review_thumb">
                                                <img alt="review images" src="html/assets/images/other/review-01.jpg">
                                            </div>
                                            <div class="review_details">
                                                <div class="review_info">
                                                    <h5><a href="#">Helen Nancy</a></h5>
                                                    <div class="rating_send">
                                                        <a href="#">Reply</a>
                                                    </div>
                                                </div>
                                                <div class="review_date">
                                                    <span>30 May, 2019</span> <span>10:20 pm</span>
                                                </div>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                                                    eiusmod teimpor in aliqua. Utf enim ad minim veniam,</p>

                                            </div>
                                        </div>
                                        <!--// Single Review -->
                                        <!-- Single Review -->
                                        <div class="pro_review">
                                            <div class="review_thumb">
                                                <img alt="review images" src="html/assets/images/other/review-02.jpg">
                                            </div>
                                            <div class="review_details">
                                                <div class="review_info">
                                                    <h5><a href="#">tome Shetty</a></h5>
                                                    <div class="rating_send">
                                                        <a href="#">Reply</a>
                                                    </div>
                                                </div>
                                                <div class="review_date">
                                                    <span>Sep 11, 2019</span>
                                                </div>
                                                <p>Lorem ipsum dolor sit con dipis cing elitdpon aliqua minim
                                                    veniam,</p>
                                            </div>
                                        </div>
                                        <!--// Single Review -->
                                        <!-- Single Review -->
                                        <div class="pro_review">
                                            <div class="review_thumb">
                                                <img alt="review images" src="html/assets/images/other/review-03.jpg">
                                            </div>
                                            <div class="review_details">
                                                <div class="review_info">
                                                    <h5><a href="#">ketrin frans</a></h5>
                                                    <div class="rating_send">
                                                        <a href="#">Reply</a>
                                                    </div>
                                                </div>
                                                <div class="review_date">
                                                    <span>Sep 25, 2019</span>
                                                </div>
                                                <p>dolore magna aliqua. Ut enim ad con Duis aute irur eritae pliciav
                                                    aquuntu consectetur dunt ut labore et dolore magna aliqua. Ut enim
                                                    adabz.</p>
                                            </div>
                                        </div>
                                        <!--// Single Review -->
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="comments-reply-area">
                                            <h5 class="comment-reply-title mb-30">Leave a Reply</h5>
                                            <form action="#" class="comment-form-area">
                                                <div class="comment-input">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <p class="comment-form">
                                                                <input type="text" required="required" name="Name"
                                                                       placeholder="Name *">
                                                            </p>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <p class="comment-form">
                                                                <input type="email" required="required" name="email"
                                                                       placeholder="Email *">
                                                            </p>
                                                        </div>

                                                        <div class="col-lg-12">
                                                            <p class="comment-form-comment">
                                                                <textarea class="comment-notes" required="required"
                                                                          placeholder="Comment *"></textarea>
                                                            </p>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="comment-form-submit">
                                                                <button class="comment-submit">SUBMIT</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <!--// blog-details-wrapper -->
                                </div>
                            </div>
                        </div>
                        <!-- End Single Content -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- main-content-wrap end -->


    <footer>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copy-right-text text-center">
                            <p>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank"
                                                                                         href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>


</div>

<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="html/assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- jQuery JS -->
<script src="html/assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="html/assets/js/vendor/popper.min.js"></script>
<script src="html/assets/js/vendor/bootstrap.min.js"></script>

<!-- Slick Slider JS -->
<script src="html/assets/js/plugins/slick.min.js"></script>
<!--  Jquery ui JS -->
<script src="html/assets/js/plugins/jqueryui.min.js"></script>
<!--  Scrollup JS -->
<script src="html/assets/js/plugins/scrollup.min.js"></script>
<script src="html/assets/js/plugins/ajax-contact.js"></script>

<!-- Vendor & Plugins JS (Please remove the comment from below vendor.min.js & plugins.min.js for better website load performance and remove js files from avobe) -->
<!--
<script src="html/assets/js/vendor/vendor.min.js"></script>
<script src="html/assets/js/plugins/plugins.min.js"></script>
-->

<!-- Main JS -->
<script src="html/assets/js/main.js"></script>

<script>
    function goToProductDetails(productId) {
        // 使用window.location或其他方法导航到产品详情页
        window.location.href = 'product-details.jsp?id=' + productId;
    }
</script>
</body>

</html>


